<template>
  <div
    :id="hasPreview ? info._id : `diy_${info._id}`"
    v-ui-ref="vSetRef"
    class="ui-flexbox UiBgBox-box w-full h-full"
    :style="{
      backgroundColor: info.extension.backgroundColor.value,
      border: `2px solid ${info.extension.borderColor.value}`,
    }"
  ></div>
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin, RefsInjectMixin, ChartMixin } from '@ve/mixin'
  import { translateTitle } from '@/utils/i18n'
  export default defineComponent({
    name: 'UiBgBox',
    mixins: [UiMixin, RefsInjectMixin, ChartMixin],
    inject: {
      hasPreview: { default: false },
    },
    props: {
      info: {
        required: true,
        type: Object,
        default: function () {
          return {}
        },
      },
    },
    data() {
      return {}
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    deactivated() {},
    beforeUnmount() {},
    methods: {
      translateTitle,
    },
  })
</script>
<style lang="scss"></style>
